<template>
	<view class="page" @touchstart="start" @touchmove="move" @touchend="end">
		<cu-bg-snow></cu-bg-snow>
		<view class="box" :style="[{transform: 'rotateX('+rotateX+'deg) rotateY('+rotateY+'deg)'}]">
			<image class="img" :class="{'animation':animation}" :draggable="false" v-for="(item,index) in info.images"
				:src="item" mode="aspectFill"></image>
		</view>
		<cu-bg-music :info="info"></cu-bg-music>
	</view>
</template>

<script>
	export default {
		onLoad(e) {
			this.id = e.id || '';
			this.pid = e.pid || '';
			this.getPhotosIndex(()=>{
				setTimeout(() => {
					this.animation = true;
				}, 200)
				setTimeout(() => {
					setInterval(() => {
						if (this.is_auto) this.rotateY += 0.05;
					}, 1)
				}, 2500)
			});			
		},
		data() {
			return {
				id: '',
				pid: '',
				info: {},
				rotateX: -25,
				rotateY: 360,
				x: 0,
				y: 0,
				xx: 0,
				yy: 0,
				animation: false,
				is_auto: true,
			}
		},
		methods: {
			start(e) {
				this.is_auto = false;
				this.x = e.changedTouches[0].clientX;
				this.y = e.changedTouches[0].clientY;
			},
			move(e) {
				let x = e.changedTouches[0].clientX;
				let y = e.changedTouches[0].clientY;
				this.xx = x - this.x;
				this.yy = y - this.y;
				this.rotateX += this.yy * 0.1;
				this.rotateY += this.xx * 0.1;
				//赋值最后一个
				this.x = x;
				this.y = y;
			},
			end(e) {
				let timer = setInterval(() => {
					this.yy *= 0.95;
					this.xx *= 0.95;
					this.rotateX += this.yy * 0.3;
					this.rotateY += this.xx * 0.2;
					if (Math.abs(this.yy) < 0.5 && Math.abs(this.xx) < 0.5) {
						clearInterval(timer);
						this.is_auto = true;
					}
				}, 13);
			},

		}
	}
</script>


<style lang="scss">
	.page {
		width: 100%;
		height: 85vh;
		display: flex;
		justify-content: center;
	}

	.box {
		z-index: 9999;
		position: relative;
		display: flex;
		margin: auto;
		transform-style: preserve-3d;
		width: 200rpx;
		height: 300rpx;

		.img {
			position: absolute;
			left: 0%;
			top: 0px;
			width: 100%;
			height: 100%;
			box-shadow: 0 0 10px #fff;
			-webkit-box-reflect: below 10rpx -webkit-linear-gradient(transparent, transparent 60%, rgba(255, 255, 255, 0.3));
			vertical-align: middle;

			&.animation {
				@for $i from 0 through 7 {
					&:nth-child(#{$i+1}) {
						transform: rotateY(#{$i*45}deg) rotateX(-3deg) translate3d(0px, 0px, 350rpx);
						transition: transform 1s ease #{2-$i*0.2}s;
					}
				}
			}
		}

	}
</style>
